import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, PixelRatio, TextInput } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import DateGapPicker from '../../../../components/common/DateGapPicker';
import { orderBaseStyle } from '../../create/_common/style';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;
export class DeliveryCpt extends Component {
	constructor(props) {
		super(props);
		let { editData } = this.props.data || {};
		this.state = {
			openDatePicker: false,
			editData,
		}
	}

	componentWillReceiveProps (props) {
		let { editData } = props.data || {}
		this.setState({
			editData
		})
	}

	_clickShow = () => {
		this.setState({
			openDatePicker: true
		})
	}

	_callBack = (type) => {
		let { itemCallback, index } = this.props.data || {};
		let { editData } = this.state;
		itemCallback && itemCallback(editData, index, type);
	}

	render () {
		let { index, removeFn } = this.props.data || {};
		let { openDatePicker, editData } = this.state;
		let { deliveryBeginDate, deliveryEndDate, quantity } = editData || null;

		quantity = MethodUtil.countObj.isNumber(quantity) ? quantity.toString() : quantity
		let dateObj = {
			startDate: editData.deliveryBeginDate || null,
			endDate: editData.deliveryEndDate || null
		};
		return (
			<View style={[styles.box, orderBaseStyle.goodsXian]} >
				<View style={styles.boxUp}>
					<Text style={styles.label}><Text style={styles.require}>* </Text>交货时间</Text>
					<TouchableOpacity style={styles.rowStyle} onPress={this._clickShow}>
						<View style={styles.xianBox}><Text style={styles.xian}>{deliveryBeginDate}</Text></View>
						<Text style={styles.fontSize14}>至</Text>
						<View style={styles.xianBox}><Text style={styles.xian}>{deliveryEndDate}</Text></View>
					</TouchableOpacity>
				</View>
				<View style={styles.boxUp2}>
					<View style={styles.boxUp3}>
						<Text style={styles.label}><Text style={styles.require}>* </Text>数量</Text>
						<View style={styles.xianBox}>
							<TextInput
								style={[styles.xian, styles.inputxian]}
								underlineColorAndroid='transparent'
								keyboardType="numeric"
								returnKeyType={'done'}
								defaultValue={quantity || ''}
								onChangeText={(text) => {
									editData.quantity = text;
								}}
								onBlur={() => {
									this._callBack('user');
								}}
							/>
						</View>
						<Text style={styles.fontSize14}>吨</Text>
					</View>
					<Text style={styles.remove} onPress={() => { removeFn && removeFn(index) }} >删除</Text>
				</View>

				<DateGapPicker
					isVisible={openDatePicker}
					date={dateObj}
					double={true}
					cb={(newDate, onoff) => {
						if (onoff) {
							this.setState({ openDatePicker: false })
						}
						if (!newDate) return;
						editData.deliveryBeginDate = newDate.startDate;
						editData.deliveryEndDate = newDate.endDate;
						this.setState({ openDatePicker: false }, () => {
							this._callBack('user')
						})
					}} />
			</View >

		)
	}
}

const styles = StyleSheet.create({
	box: {
		marginLeft: 13 * scale,
		marginRight: 20 * scale,
		paddingTop: 0 * scale,
		paddingBottom: 15 * scale
	},
	rowStyle: {
		flexDirection: 'row',
	},
	boxUp: {
		flexDirection: 'row',
		paddingTop: 15 * scale,
	},
	boxUp2: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingTop: 15 * scale,
	},
	boxUp3: {
		flexDirection: 'row',
	},
	label: {
		width: 70 * scale,
		color: '#333',
		fontSize: 14 * scale
	},
	require: {
		fontSize: 14 * scale,
		color: '#D0021B',
	},
	xianBox: {
		width: 108 * scale,
		height: 24 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderColor: '#ccc',
	},
	xian: {
		marginLeft: 5 * scale,
		marginRight: 5 * scale,
		color: '#222',
		textAlign: 'center',
		fontWeight: 'bold'
	},
	inputxian: {
		paddingVertical: 0,
		textAlign: 'center',
		fontWeight: 'bold',
	},
	remove: {
		paddingLeft: 8 * scale,
		paddingRight: 8 * scale,
		color: 'red',
		fontSize: 14 * scale
	},
	fontSize14: {
		fontSize: 14 * scale,
		color: '#333',
	}

})